const express = require('express')
const path = require('path')
const fs = require('fs')
const { createBundleRenderer } = require('vue-server-renderer')

// server-bundle.json
const serverBundle = require('./dist/vue-ssr-server-bundle.json')

// 页面模板
const templatePath = path.resolve('./index.template.html')
const template = fs.readFileSync(templatePath, 'utf-8')

// client-manifest.json
const clientManifest = require('./dist/vue-ssr-client-manifest.json')

// create bundle renderer
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false , // 推荐
  template,  //（可选）页面模板
  clientManifest // （可选）客户端构建 manifest
})

const server = express();

// 给静态资源虚拟路径‘/dist’指定其实际路径
server.use('/dist', express.static(path.resolve('./dist')))

// 在服务器处理函数中……
server.get('*', (req, res) => {
  // "渲染上下文对象"，为页面模板提供插值数据
  const context = {
    url: req.url,
    title: 'Hello Vue SSR',
    meta: `
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    `
  }
  // 这里无需传入一个应用程序，因为在执行 bundle 时已经自动创建过。
  // 现在我们的服务器与应用程序已经解耦！
  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
    } else {
      res.end(html)
    }
  })
})

const port = 8080
server.listen(port, () => {
  console.log(`server started at localhost:${port}`)
})

